<template>
  <div class="WidgetProperties">
    <div class="base-properties">
      <PropertyItem :object="widgetConfig" label="ID" prop="id" type="text" />
      <PropertyItem :object="widgetConfig" label="ID" prop="name" type="string" />
      <template v-if="autoSize">
        <PropertyItem :object="widgetConfig._runtime" label="宽度" prop="w" type="number" :min="0" :step="1" disabled/>
        <PropertyItem :object="widgetConfig._runtime" label="高度" prop="h" type="number" :min="0" :step="1" disabled/>
      </template>
      <template v-else>
        <PropertyItem :object="widgetConfig.base" label="宽度" prop="w" type="number" :min="0" :step="1" />
        <PropertyItem :object="widgetConfig.base" label="高度" prop="h" type="number" :min="0" :step="1"  />
      </template>
      <PropertyItem :object="widgetConfig.base" label="X 坐标" prop="x" type="number" :step="1" />
      <PropertyItem :object="widgetConfig.base" label="Y 坐标" prop="y" type="number" :step="1" />
      <PropertyItem :object="widgetConfig.base" label="锚点" prop="anchor" type="anchor" :step="1" />
    </div>
    <WidgetPropertiesGroup
      v-for="propsGroup in propsGroups"
      :key="propsGroup.name"
      :propsGroup="propsGroup"
      :widgetConfig="widgetConfig"
    ></WidgetPropertiesGroup>
  </div>
</template>
<script lang="ts">
import WidgetConfig from '@/core/model/WidgetConfig'
import { Component, Prop, Vue, Inject } from 'vue-property-decorator'
import PropertyItem from './property-item/PropertyItem.vue'
import ApplicationEditor from '@/components/application-editor/ApplicationEditor.vue'
import WidgetPropertiesGroup from './WidgetPropertiesGroup.vue'

@Component({
  components: {
    PropertyItem,
    WidgetPropertiesGroup
  }
})
export default class WidgetProperties extends Vue {
  @Inject('app-editor')
  public appEditor!: ApplicationEditor

  @Prop({ type: Object, required: true })
  private widgetConfig!: WidgetConfig

  private get widgetDefinition() {
    return this.appEditor.getWidgetDefinitionBytag(this.widgetConfig._widgetTag)
  }

  private get propsGroups() {
    return this.widgetDefinition?.propsGroups
  }

  private get autoSize() {
    return this.widgetDefinition?.autoSize || false
  }
}
</script>
<style scoped lang="scss">
@import '~@/style/variables.scss';
.WidgetProperties {
  .base-properties {
    padding: 5px 10px;
  }
}
</style>
